<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="navbar-content" :style="{height:navBarHeight+'px',
			width:windowWidth+'px'}">
				<view class="navbar-serach">
					<view class="navbar-serach_icon">
							<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<view class="navbar-serach_text">uni-app,vue</view>
				</view>
			</view>
		</view>
		<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight:45,
				windowWidth:375
			};
		},
		created() {
			//获取手机系统信息
		  const info = uni.getSystemInfoSync()
		  //设置状态栏高度
		  this.statusBarHeight = info.statusBarHeight
		  this.windowWidth = info.windowWidth
		  //#ifdef H5 || APP-PLUS || MP-ALIPAY
		  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		  console.log(menuButtonInfo);
		  this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + 
		  (menuButtonInfo.top - info.statusBarHeight)
		  this.windowWidth = menuButtonInfo.left
		  //#endif
		  //console.log(navBarHeight);
		  this.statusBarHeight = 0
		}
	}
</script>

<style lang="scss">
	@import '../../common/css/icons.css';
   .navbar {
	   .navbar-fixed {
		   position: fixed;
		   top: 0;
		   left: 0;
		   z-index: 99;
		   width: 100%;
		   background-color: $mk-base-color;
		   .navbar-content {
		       display: flex;
		       justify-content: center;
		       align-items: center;
		       padding: 0 15px;
		       height: 45px;
		       box-sizing: border-box;
			   .navbar-serach {
			   		   display: flex;
			   		   align-items: center;
			   		   padding: 0 10px;
			   		   width: 100%;
			   		   height: 30px;
			   		   border-radius: 30px;
			   		   background-color: #fff;
			   		   .navbar-serach_icon {
			   			   //width: 10px;
			   			   //height: 10px;
			   			   //border: 1px red solid;
			   			   margin-right: 10px;
			   		   }
			   		   .navbar-serach_text {
			   			   font-size: 12px;
			   			   color: #999;
			   		   }
			   }
		   }
		  
	   }
	 
   }
</style>
